import React, { Component } from 'react';
import {Text, View, ScrollView, StyleSheet, Image} from 'react-native';
import {FLAG_LANGUAGE, LanguageDao} from '../../js/expand/dao/LanguageDao';
import CheckBox from 'react-native-check-box';
import { connect } from 'react-redux'

class CustomKeyPage extends Component {
  constructor(props) {
    super(props);
    this.languageDao = new LanguageDao(FLAG_LANGUAGE.flag_key);
    this.changeValue = [];
    this.state = {
      dataArray: []
    }
    this.type = this.props.navigation.getParam('type', '')
  }
  componentDidMount() {
    this.loadData();
  }
  // 加载数据
  loadData() {
    if(this.type) {
      this.languageDao.fetch().then(result=> {
        let arr = [...result]
        for(let i=0; i<arr.length; i++) {
          arr[i].checked = false
        }
        this.setState({
          dataArray: arr
        })
      })
    } else {
      this.languageDao.fetch().then(result=> {
        this.setState({
          dataArray: result
        })
      }).catch(error => {
        console.log(error)
      })
    }
  }

  //渲染数据 
  renderView() {
    if(!this.state.dataArray || this.state.dataArray.length == 0) {
      return null
    }

    let len = this.state.dataArray.length;
    let views = []
    for(let i = 0, l=len-2; i<=l; i+=2) {
      views.push(
      <View key={i}>
        <View style={styles.item}>
          {this.renderCheckBox(this.state.dataArray[i])}
          {this.renderCheckBox(this.state.dataArray[i+1])}
        </View>
        <View style={styles.line}></View>
      </View>
      )
    }
    if(len%2 === 0) {

    }else {
      views.push(
        <View key={len-1}>
          <View style={styles.item}>
            {this.renderCheckBox(this.state.dataArray[len-1])}
          </View>
          <View style={styles.line}></View>
        </View>
      )
    }
    return views
  }

  onClick(data) {
    let arr = [...this.state.dataArray];
    let index = arr.indexOf(data);
    arr[index].checked = !arr[index].checked
    this.setState({
      dataArray: arr
    })
    // // ArrayUtils.updateArray(this.changeValues, data)
    for(let i= 0, len = this.changeValue.length; i<len; i++) {
      var temp = this.changeValue[i];
      if(temp === data) {
        this.changeValue.splice(i, 1);
        return
      }
    }
    this.changeValue.push(data)
    this.props.navigation.setParams({changeValue: this.changeValue, dataArray: this.state.dataArray})
  }

  // 渲染checkbox
  renderCheckBox(data) {
    if(data) {
      let leftText = data.name;
      let isChecked = data.checked;
      return (
        <CheckBox
            style={{flex: 1, padding: 10}}
            onClick={()=>this.onClick(data)}
            isChecked={isChecked}
            leftText={leftText}
            checkedImage={<Image style={{tintColor: this.props.themeColor}} source={require('../../assets/img/ic_check_box.png')}
                                  />}
            unCheckedImage={<Image style={{tintColor: this.props.themeColor}} source={require('../../assets/img/ic_check_box_outline_blank.png')}
                                  />}
        />);
    }
  }

  render() {
    return (
      <View style={[styles.container, {backgroundColor: '#fff'}]}>
        <ScrollView>
          {this.renderView()}
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  line: {
    height: 1,
    backgroundColor: '#ccc'
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
  }
})

export default connect((state)=> ({themeColor: state.theme.themeColor}), null)(CustomKeyPage)